<template>
  <div>
    <h3 style="padding-left: 10px;">平台文件资源情况</h3>
    <div id="fileAsset"></div>
  </div>
</template>

<script>
import { reqFileAssetReport } from "@/api/report/visitlog";

import Highcharts from "highcharts/highstock";

export default {
  props: {},
  data() {
    return {
      chart: null,
      options: {
        title: {
          text: ""
        },
        credits: {
          enabled: false
        },
        tooltip: {
          pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>"
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: "pointer",
            dataLabels: {
              enabled: true,
              format: "<b>{point.name}</b>: {point.percentage:.1f} %",
              style: {
                color:
                  (Highcharts.theme && Highcharts.theme.contrastTextColor) ||
                  "black"
              },
              connectorColor: "silver"
            }
          }
        },
        series: [
          {
            type: "pie",
            name: "占比",
            data: [
              // ["Firefox", 45.0],
              // ["IE", 26.8],
              // {
              //   name: "Chrome",
              //   y: 12.8,
              //   sliced: true,
              //   selected: true
              // },
              // ["Safari", 8.5],
              // ["Opera", 6.2],
              // ["其他", 0.7]
            ]
          }
        ]
      }
    };
  },
  components: {},
  mounted() {},
  created() {
    this.init();
  },
  methods: {
    async init() {
      let res = await reqFileAssetReport();
      if (res.code === 200) {
        this.options.series[0].data = res.data;
        this.options.series[0].data[0].sliced = true;
        this.options.series[0].data[0].selected = true;
        this.showChart();
      }
    },
    showChart() {
      if (this.chart) {
        this.chart.destroy();
      }
      this.chart = new Highcharts.Chart("fileAsset", this.options);
    }
  }
};
</script>


<style lang="scss" scoped>
</style>